import React, { Component } from 'react'
import { connect } from 'react-redux'
import { WhiteSpace, WingBlank } from 'antd-mobile'
import TitleNavBar from '@/common/components/displays/TitleNavBar'
import '@/common/style/ui.less'
import '@/common/style/agencyReport.less'
class AgencyReport extends Component {
    constructor(props) {
        super(props)
        this.state = {
            titleData: {
                title: "Back",
                centerTitle: "",
            },
            dataTable : Array.from(new Array(9)).map((_val, i) => ({
                text: `name${i}`,
            })),
            tableHead: [
                {id: 1, value: "Month"},
                {id: 2, value: "Sharing"},
                {id: 3, value: "Allowance"},
                {id: 4, value: "Bouns"},
                {id: 5, value: "Prize"}
            ],
            tableBody:[
                {pid: 1,
                content:[
                    {id: 1, value: "2018-10"},
                    {id: 2, value: ""},
                    {id: 3, value: ""},
                    {id: 4, value: ""},
                    {id: 5, value: ""}
                ]},
                {pid: 2,
                content:[
                    {id: 1, value: "2018-09"},
                    {id: 2, value: ""},
                    {id: 3, value: ""},
                    {id: 4, value: ""},
                    {id: 5, value: ""}
                ]},
                {pid: 3,
                content:[
                    {id: 1, value: "2018-08"},
                    {id: 2, value: ""},
                    {id: 3, value: ""},
                    {id: 4, value: ""},
                    {id: 5, value: ""}
                ]},
                {pid: 4,
                content:[
                    {id: 1, value: "2018-07"},
                    {id: 2, value: ""},
                    {id: 3, value: ""},
                    {id: 4, value: ""},
                    {id: 5, value: ""}
                ]}
            ] 
        }
    }
    render() {
        return (
            <div className="agency-report">
                <TitleNavBar titleData={this.state.titleData} Drawerstatus={false}/>
                <WhiteSpace />
                <WingBlank>
                    <div className="sub-title">Agency Revenue Report</div>
                </WingBlank>
                <WhiteSpace />
                <table>
                    <thead>
                    <tr>
                        {
                            this.state.tableHead.map((item)=>
                                <th key={item.id}>{item.value}</th>
                            )
                        }
                    </tr>
                    </thead>
                    <tbody>
                        {
                            this.state.tableBody.map((item)=>
                                <tr key={item.pid}>
                                    {item.content.map((childItem)=>
                                        <td key={childItem.id}>{childItem.value}</td>
                                    )}
                                </tr>
                            )
                        }
                    </tbody>
                </table>
            </div>
        )
    }

}
function mapStateToProps(state, ownProps) {
    return {

    }
}
export default connect(mapStateToProps)(AgencyReport);